<template>
  <div class="startGames">
    <div class="header">
      <span class="leftBack" @click="leftBack"></span>
      <span> <span>当前得分：</span><font>{{fenshu}}</font>分</span>
    </div>
    <div class="centent">
      <div class="zhi" v-for="(item,index) in creatDiv">
        <div v-for="(itam,indax) in item.clearDiv" @click="clearDiv(index,indax)"></div>
      </div>
    </div>
    <div class="timer" v-if="showTimer">
      {{timer}}
    </div>
    <!--<div class="wuman"></div>-->
  </div>
</template>

<script>
  export default {
    name: "start-games",
    data() {
      return {
        fenshu: 0,
        showTimer: true,
        timer: 5,
        creatDiv: [{
          clearDiv: [{}]
        },
          {clearDiv: []},
          {clearDiv: []},
          {clearDiv: []}
        ]
      }
    },
    mounted() {
      const that = this;
      var time = setInterval(function () {
        that.timer--;
        if (that.timer <= 0) {
          that.showTimer = false;
          that.startGames();
          clearInterval(time);
        }
      }, 1000);
    },
    methods: {
      leftBack() {
        var that = this;
        var btnArray = ['否', '是'];
        mui.confirm("确定退出游戏吗？", "提示", btnArray, function (e) {
          if (e.index == 1) {
            that.$router.replace({
              'path':'/clickdiv/d',
              'query':{'showHead':true}
            });
          }
        },'div');
      },
      clearDiv(i, t) { //计算分数
        this.creatDiv[i].clearDiv.splice(t, 1);
        this.fenshu += 1;
      },
      startGames() {
        var obj = {}; //初始化
        const that = this;
        var index = parseInt(Math.random() * (4 - 1 + 1) + 1);
        this.creatDiv[index - 1].clearDiv.push(obj);

        // setTimeout(function () {
        //   that.startGames();
        // },1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .startGames {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .timer {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 200px;
      color: red;
      background: rgba(0, 0, 0, .2);
      position: fixed;
      top: 0;
    }

    .header {
      width: 100%;
      height: 40px;
      padding: 0 16px;
      font-size: 14px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(0, 0, 0, .2);

      .leftBack {
        display: inline-block;
        width: 13px;
        height: 13px;
        margin-right: 8px;
        border-top: 3px solid white;
        border-right: 3px solid white;
        transform: rotate(-135deg);
      }

      font {
        color: red;
        font-weight: bold;
        margin-right: 5px;
      }
    }
    .centent {
      width: 100%;
      /*height: 100%;*/
      display: flex;
      flex: 1;
      justify-content: space-between;
      .zhi {
        flex: 1;
        height: 100%;
        text-align: center;
        border-right: 1px solid #ccc;

        div {
          width: 60%;
          /*flex: 1;*/
          height: 80px;
          margin: 0 auto;
          background: white;
          border: 1px solid blue;
        }
      }
    }
    .wuman {
      width: 50px;
      height: 50px;
      background: red;
      position: fixed;
      bottom: 30px;
      left: 23px;
      border-radius: 50%;
    }
  }
</style>
